<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
        <el-breadcrumb-item>基本表单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-tabs type="border-card"
             value="base">
      <el-tab-pane label="基本表单"
                   name="base">
        <div class="container">
          <el-form ref="form"
                   :model="form"
                   label-width="80px">
            <el-row type="flex"
                    class="row-bg">
              <el-col>
                <el-form-item label="数据名称"
                              prop="name">
                  <el-input v-model="form.name"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="数据类型"
                              prop="type">
                  <el-input v-model="form.type"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="采集时间">
                  <el-date-picker placeholder="选择日期"
                                  v-model="form.cdate"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="录入时间">
                  <el-date-picker placeholder="选择日期"
                                  v-model="form.rtime"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex"
                    class="row-bg">
              <el-col>
                <el-form-item label="中心经度">
                  <el-input v-model="form.cen_lon"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="中心纬度">
                  <el-input v-model="form.cen_lat"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex"
                    class="row-bg">
              <el-col>
                <el-form-item label="采集人">
                  <el-input v-model="form.author"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="存放位置">
                  <el-input v-model="form.cpath"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col>
                <el-form-item label="记录人">
                  <el-input v-model="form.recordp"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="数据格式">
                  <el-input v-model="form.format"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex"
                    class="row-bg">
              <el-col :span="24">
                <el-form-item label="范围/经纬度">
                  <el-input v-model="form.coors"
                            auto-complete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="详细说明">
                  <el-input type="textarea"
                            v-model="form.deta"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-button type="primary"
                   @click="onSubmit">数据上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "baseform",
  data () {
    return {
      options: [],
      baseUrl: BASEURL,
      form: {
        name: "",
        type: "",
        cdate: "",
        cen_lon: "",
        cen_lat: "",
        l_on_lon: "",
        l_on_lat: "",
        r_d_lon: "",
        r_d_lat: "",
        author: "",
        cpath: "",
        recordp: "",
        rtime: "",
        format: "",
        details: ""
      }
    };
  },
  methods: {
    onSubmit () {
      // 先更新页面视图，再往数据库写入数据
      let upload_url = this.baseUrl + "/upload_single";
      // 获取所有更新完之后的数据
      let str = JSON.stringify(this.form);
      let postData = this.$qs.stringify({
        record: str
      });
      this.$axios({
        method: "post",
        url: upload_url,
        data: postData
      }).then(res => {
        this.$message.success("提交成功！");
      });
    }
  }
};
</script>